<!--污染防治-->
<template>
  <div v-loading="loading" element-loading-text="拼命加载中">
    <!--搜索区-->

    <!--表格-->
    <el-row>
      <el-col>
        <div class="data-wrapper">
          <template v-if="tableData!=null">
            <el-table ref="multipleTable" :data="tableData"  tooltip-effect="dark" style="width: 100%">
              <el-table-column type="index" label="序号" :index="indexMethod" width="50">
              </el-table-column>
              <el-table-column prop="dutyCode" label="任务编号"  :show-overflow-tooltip="true" width="100">
              </el-table-column>
              <el-table-column prop="dutyName"  label="任务名称" :show-overflow-tooltip="true" width="120">
              </el-table-column>
              <el-table-column prop="dutyType" label="任务类型" :show-overflow-tooltip="true" width="120" :formatter="formatType">
              </el-table-column>
              <el-table-column prop="dutyNote" label="任务内容"  :show-overflow-tooltip="true" width="120">
              </el-table-column>
              <el-table-column prop="eName" label="所属事件" :show-overflow-tooltip="true" width="120">
              </el-table-column>
              <el-table-column prop="eCode" label="事件编码" :show-overflow-tooltip="true" width="120">
              </el-table-column>
              <el-table-column prop="createUser" label="任务发布人" :show-overflow-tooltip="true" width="120">
              </el-table-column>
              <el-table-column prop="createTime" label="整治时间" :show-overflow-tooltip="true" >
              </el-table-column>
            </el-table>
          </template>
        </div>
      </el-col>
    </el-row>
    <!--底部区域-->
    <el-row :gutter="20" type="flex" justify="space-between" align="center" class="page-wrapper">

      <!-- 分页 -->
      <el-col :span="20">
        <div class="page-item">
          <el-pagination background
                         @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page.sync="listQuery.currentPage"
                         :page-sizes="pageSizes"
                         :page-size="listQuery.pageSize"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="dataCount"/>
        </div>
      </el-col>
    </el-row>

  </div>
</template>
<script>
    export default {
        data() {
            return {

                //表格全局参数
                tableData: null,
                //默认数据总数
                dataCount: 100,
                pageSizes: [5, 10, 20, 30, 40],
                //批量选中参数
                //多选的值
                listSelect: [],
                //分页参数
                //搜索框参数
                searchInput: "",
                //搜索参数
                //搜索。axios发送的参数
                listQuery: {
                    currentPage: 1,
                    pageSize: 10,
                    dutyTypeSearch:'A002'
                },
                //弹框的数据是否可编辑
                readonly: true,
                value: "", //
                //页面加载
                loading: false,

                //弹层显示开关
                dialogFormVisible: false,
                //弹层表单数据
                form: {},
                //弹层宽度
                formLabelWidth: "100px",

                // 下拉选项
                options: [
                    {
                        value: "Leanne Graham",
                        label: "Leanne Graham"
                    }
                ],
                //类型下拉选项字典
                typeDir: [
                    {
                        value: "类1",
                        key: "1"
                    },
                    {
                        value: "类2",
                        key: "2"
                    }
                ],
                dutyTypeOptions:[]
            };
        },
        mounted() {
            // 初始化页面
            this.postList();
        },
        updated() {},
        destroyed() {},
        methods: {
            // 类型翻译
            formatType: function(row, column) {
                for ( var i = 0; i <this.dutyTypeOptions.length; i++){
                    if(row.dutyType===this.dutyTypeOptions[i].dictValue){
                        return this.dutyTypeOptions[i].dictName;
                    }
                }
            },

            //任务类型搜索框框
            dutyTypeSearchList(){
            },
            //所属事件搜索框框
            eNameSearchList(){
            },
            //负责人
            liableUserList(){
            },

            //列表查询
            postList() {
                this.loading = true;
                this.postRequest("/api/rcs/listDutys", this.listQuery)
                    .then(res => {
                    var data = res.data;
                if (data.status == 200) {
                    this.tableData = data.data;
                    this.dataCount = data.count;
                } else {
                    alert(data.msg);
                }
                this.loading = false;
            })
            .catch(error => {
                    //错误信息
                    console.log(error);
            });

                //获取任务类型
                this.getDictionary({types:["DUTY_TYPE"]}).then(res => {
                    var data = res.data;
                if (data.status == 200) {
                    this.dutyTypeOptions = data.data["DUTY_TYPE"];
                } else {
                    this.$message.error(data.msg);
                }
            })
            .catch(error => {
                    //错误信息
                    this.$message.error(error);
            });
            },
            //搜索功能
            handSearch() {
                console.log(this.listQuery)
                this.postList();
            },
            //增加操作
            openAdd() {
                this.readonly = false;
                this.form = {};
                this.dialogFormVisible = true;
            },
            //查看操作
            handleView(index, row) {
                this.readonly = true;
                this.form = row;
                this.dialogFormVisible = true;
            },
            //多选,点击选框时
            handleSelectionChange(val) {
                var self = this;
                self.listSelect = val; //多选的参数
            },
            indexMethod(index) {
                return (
                    index + 1 + (this.listQuery.currentPage - 1) * this.listQuery.pageSize
                );
            },
            //每页个数改变
            handleSizeChange(size) {
                this.listQuery.pageSize = size;
                this.listQuery.currentPage = 1;
                this.postList();
            },
            //当前页改变
            handleCurrentChange(currentPage) {
                this.listQuery.currentPage = currentPage;
                this.postList();
            }
        }
    };
</script>



